<template>
    <div :class='className' v-loading="loading" >
       <div :class='className' >
            <div style="margin-top: 5px;display:flex;flex-direction: row;">
                
                    <el-input placeholder="请输入内容" @keyup.enter.native="goSearch" v-model="names" class="input-with-select" style='flex:1'>
                    <!--el-select v-model="pId" slot="prepend" placeholder="请选择" style='width:120px;'>
                        <el-option label="请选择..." value="" ></el-option>
                        <el-option :label="item.sf_ex2" :value="item.sf_id" v-for="(item,index) in options" :key="index"></el-option>
                    </el-select-->
                        <el-button slot="append" icon="el-icon-search" @click="goSearch"></el-button>
                    </el-input>
                    <el-button-group style="margin-left:10px">
                        <el-button type="primary" plain :class="{'actives':showType=='icon'}" @click="changeShowType('icon')">图标</el-button>
                        <el-button type="primary" plain :class="{'actives':showType=='list'}" @click="changeShowType('list')">列表</el-button>
                    </el-button-group>
                
            </div>
            <div class='mains' >
                <div class='leftMenu' v-show="options.length>1||(options.length>0&&options[0].children.length>0)">
                    <el-tree :data="options" 
                    ref="elMenu"
                    :props="defaultProps" 
                    :class="{'treeYtj':isYtj=='Y'}"
                    node-key="id"
                    @check-change="handleNodeClick"
                    @node-click="handleNodeClick3"
                    :default-expanded-keys="['b1', 's1']"
                    show-checkbox
                    check-strictly
                    
                    >
                    <span class="span-ellipsis" slot-scope="{ node,data }">
                        <i v-if="data.$treeNodeId==1" class="el-icon-tree"></i>
                        <i v-else-if="data.children&&data.children.length>0" class="el-icon-folder"></i>
                        <i v-else class="el-icon-file"></i>
                            <span :title="node.label" style="padding-left:3px;">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </div>
                <ul class='item_ul' v-if="shows&&isYtj!='Y'&&showTypes=='1'&&showType=='icon'" >
                    <li v-for="(item,index) in tableData" :key="index" class='item_li' @dblclick="addItem(item)">
                        <!--viewer :images="item.sf_ex50.split(',')">
                         <div class='item_icon' >
                             <template v-for="(im,index3) in item.sf_ex50.split(',')">
                                 <img
                                    style="width: 80px; height: 80px" :key="index3"
                                    :src="im" v-if="index3==0"
                                    
                                    />
                                    <img
                                    style="width: 80px; height: 80px;display:none" :key="index3"
                                    :src="im" v-else
                                    
                                    />
                             </template>
                            
                           
                        </div>
                        </viewer-->
                        <div class='item_icon' @click="checkVideo(item)">
                            <!--el-image 
                                style="width: 80px; height: 80px"
                                :src="item.sf_ex50.split(',')[0]"
                                :preview-src-list="item.sf_ex50.split(',')">
                            </el-image-->
                            <el-image 
                                style="width: 80px; height: 80px"
                                :src="item.sf_ex50.split(',')[0]"
                                
                                :preview-src-list="item.sf_ex50.split(',')">
                            </el-image>
                        </div>
                        <div class='item_content'>
                            <div :class='{"title":true,"title_cursor":item.sf_ex24=="是"||item.sf_ex24=="套餐"||item.sf_ex24=="A","activeItem":selectItemxm["id"+item.szi_ex8]>0}'  >{{item.szi_ex1}} <span v-if='selectItemxm["id"+item.szi_ex8]>0'>【已选择】</span></div>
                            <div class='remark'>
                                <div><span class='remark_label'>所属类别:</span>{{item.szi_ex7}}</div>
                                <div v-if="item.szi_ex18!=''"><span class='remark_label'>减免类型:</span>{{item.szi_ex18}}<span v-if="item.sf_ex41!=''">({{item.sf_ex41}})</span></div>
                                <div>{{item.szi_ex6}}</div>
                            </div>  
                            
                            <div class='price'>
                                
                                ￥
                                <!--span v-if="item.szi_ex2!='0'&&item.szi_ex2!='0.0'">{{item.szi_ex2}}</span>
                                <span v-else>面议</span-->
                                <input v-model="item.szi_ex2" :readonly="item.szi_ex2!='0.0'&&item.szi_ex2!='0'" style='display:inline-block;width:100px;border:0;color:red' @change="changeItem(item)" @click="openPrices(item)" v-if="item.szi_ex33!='Y'"/>
                                <span v-else>{{item.szi_ex2}}</span>
                                <span v-if="item.szi_ex3!=''" class='dw'>
                                    /{{item.szi_ex3}}
                                </span>
                            </div> 
                        </div>
                        <el-button type="success" size="small"  @click="openTcmx(item)" style='float:left;margin-top:20px;height:40px' v-if='(item.sf_ex24=="是"||item.sf_ex24=="套餐"||item.sf_ex24=="A")&&showtc=="Y"' >明细</el-button>
                        <div class="item_btn" v-if="isshownum!='A'">
                            
                            
                            <div style='display:inline-block;width:40px'>
                                <el-button type="primary" icon="el-icon-minus" size="small" circle v-show="selectItem['id'+item.szi_ex8]>0" @click="removeItem(item)"></el-button>
                            </div>
                            <div style='display:inline-block;width:30px'>
                                <span style='display:inline-block;width:30px;text-align:center'  v-show="selectItem['id'+item.szi_ex8]>0" >{{selectItem["id"+item.szi_ex8]}}</span>
                            </div>
                            <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addItem(item)"></el-button>
                        </div>
                    </li>
                </ul>
                <div v-if="shows&&(isYtj=='Y'||showTypes=='2')&&showType=='icon'" class='item_ul' id="box" style="padding:5px;background:#efefef">
                    <ul>
                        <li v-for="(item,index) in tableData" :key="index" style="background:#fff;margin-top:15px;position: relative;width:240px;">
                            <!--el-carousel style="height:210px;" >
                                <el-carousel-item  v-for="(image,index) in item.sf_ex58.split(',')" :key="index">
                                    <el-image
                                        
                                        :src="image"
                                        fit="contain" 
                                        :preview-src-list="item.sf_ex50.split(',')"  ></el-image>
                                </el-carousel-item>
                              
                            </el-carousel-->
                            <div style="width:100%;text-align:center">
                                <el-image
                                            
                                            :src="item.sf_ex58.split(',')[0]"
                                            fit="contain" 
                                            @click="showBigImg(item)"  style="height:180px;"></el-image>
                            </div>
                           <div style="height:100px">
                                <div class='title' style='font-weight:bold;margin-top:5px;font-size:20px'>{{item.szi_ex1}}<span v-if="item.szi_ex7!=''">({{item.szi_ex7}})</span></div>
                                <p  style='padding-left:5px;'>{{item.szi_ex6}}</p>
                                <p  style='padding-left:5px;height:20px;font-size:16px;font-weight:bold' v-if="isWarehouse=='Y'&&item.sf_ex3=='Y'">现库存数：<span v-if="item.kcnum=='0'" style="color:red">{{item.kcnum}}</span><span v-else style="color:green">{{item.kcnum}}</span></p>
                            </div>
                           <div style='padding-left:5px;color:red;font-size:18px' class='box_price'>
                                <div class='box_price_txt' @click="openPrice(item)">¥{{item.szi_ex2}}</div>
                                <div class="item_btn" style="height:30px;width:140px;">
                                    <div style='display:inline-block;width:40px'>
                                        <el-button type="primary" icon="el-icon-minus" size="small" circle v-show="selectItem['id'+item.szi_ex8]>0" @click="removeItem(item)"></el-button>
                                    </div>
                                    <div style='display:inline-block;width:60px'>
                                        <span style='display:inline-block;width:60px;text-align:center;font-size:20px;color:green;font-weight:bold'  v-show="selectItem['id'+item.szi_ex8]>0" >{{selectItem["id"+item.szi_ex8]}}</span>
                                    </div>
                                    <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addItem(item)"></el-button>
                                </div>

                            </div>
                              <div class='video'  @click="openVideo(item)" v-if="item.sf_ex57!=''">
                                点击查看视频
                            </div>
                        </li>
                    </ul>
                </div>

                <div v-if="shows&&showType=='list'" class='item_ul' id="box" style="padding:5px;background:#efefef">
                     <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                        label="项目代码"
                        width="80" >
                        <template slot-scope="scope">
                           <span v-if="scope.row.sf_ex53!=''">{{ scope.row.sf_ex53 }}</span>
                           <span v-else>{{ scope.row.sf_ex2 }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="项目名称"
                        width="150">
                        <template slot-scope="scope">
                           {{ scope.row.szi_ex1 }}
                        </template>
                        </el-table-column>
                      
                        <el-table-column
                        label="库存数"
                        v-if="isWarehouse=='Y'"
                        width="80">
                        <template slot-scope="scope">
                            <span v-if="scope.row.kcnum=='0'&&scope.row.sf_ex3=='Y'" style="color:red">{{scope.row.kcnum}}</span><span v-else-if="scope.row.sf_ex3=='Y'" style="color:green">{{scope.row.kcnum}}</span>
                          
                        </template>
                        </el-table-column>
                         <el-table-column
                        label="单价"
                        width="80">
                        <template slot-scope="scope" >
                           <div @click="openPrice(scope.row)">¥{{ scope.row.szi_ex2 }}</div>
                        </template>
                        </el-table-column>
                         <el-table-column
                         fixed="right"
                        label="操作"
                        width="140">
                        <template slot-scope="scope" @click="openPrice(scope.row)">
                           <div style='padding-left:5px;color:red;font-size:18px;text-align:right' class='box_price'>
                                <div class="item_btn" style="height:30px;margin-top:0">
                                    <div style='display:inline-block;width:40px'>
                                        <el-button type="primary" icon="el-icon-minus" size="small" style="width:30px;height:30px" circle v-show="selectItem['id'+scope.row.szi_ex8]>0" @click="removeItem(scope.row)"></el-button>
                                    </div>
                                    <div style='display:inline-block;width:40px'>
                                        <span style='display:inline-block;width:40px;text-align:center;font-size:20px;color:green;font-weight:bold'  v-show="selectItem['id'+scope.row.szi_ex8]>0" >{{selectItem["id"+scope.row.szi_ex8]}}</span>
                                    </div>
                                    <el-button type="primary" icon="el-icon-plus"  style="width:30px;height:30px"  size="small" circle @click="addItem(scope.row)"></el-button>
                                </div>

                            </div>
                        </template>
                        </el-table-column>
                    </el-table>
                    <!--table style="width:100%;table-layout:fixed;background:#fff">
                        <colgroup>
                            <col style="width:180px"/>
                            <col style="width:80px"/>
                            <col style="width:60px"/>
                            <col style="width:60px"/>
                            <col />
                        </colgroup>
                        <tr style="height:40px">
                            <td style="font-weight:bold;font-size:16px">项目名称</td>
                            <td style="font-weight:bold;font-size:16px">项目分组</td>
                            <td style="font-weight:bold;font-size:16px">库存数</td>
                            <td style="font-weight:bold;font-size:16px">单价</td>
                            <td style="font-weight:bold;font-size:16px">操作</td>
                        </tr>
                        <tr v-for="(item,index) in tableData" :key="index" style="height:45px">
                            <td>{{item.szi_ex1}}</td>
                            <td>{{item.szi_ex7}}</td>
                            <td>{{item.kcnum}}</td>
                            <td @click="openPrice(item)">¥{{item.szi_ex2}}</td>
                            <td>
                                <div style='padding-left:5px;color:red;font-size:18px' class='box_price'>
                                    <div class="item_btn" style="height:30px;margin-top:0">
                                        <div style='display:inline-block;width:40px'>
                                            <el-button type="primary" icon="el-icon-minus" size="small" circle v-show="selectItem['id'+item.szi_ex8]>0" @click="removeItem(item)"></el-button>
                                        </div>
                                        <div style='display:inline-block;width:30px'>
                                            <span style='display:inline-block;width:30px;text-align:center;font-size:20px;color:green;font-weight:bold'  v-show="selectItem['id'+item.szi_ex8]>0" >{{selectItem["id"+item.szi_ex8]}}</span>
                                        </div>
                                        <el-button type="primary" icon="el-icon-plus" size="small" circle @click="addItem(item)"></el-button>
                                    </div>

                                </div>
                            </td>
                        </tr>
                    </table-->
                </div>
            </div>
            
            <div class='footer ' v-if="isOpen!='N'">
                <div class='amt_total'>
                    <div class='amt_total_item'>
                        <span>总金额:&nbsp;&nbsp;</span><span v-text="amt_totals" style='color:green;font-weight:bold;margin-right:30px'></span>
                        <span>减免金额:&nbsp;&nbsp;</span><span v-text="jm_totals" style='color:red;font-weight:bold;margin-right:30px'></span>
                        <span>实收金额:&nbsp;&nbsp;</span><span v-text="sh_totals" style='font-weight:bold;margin-right:30px'></span>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="titlect" 
            append-to-body
            width="80%"
            class="dialogTc"
            height="80VH"
            style="left:10%;top:10%;height:80VH;overflow:hidden"
           
            :visible.sync="dialogVisibletc">
            <div style='overflow:auto;'>
                <el-table
                    :data="mealList"
                    style="width: 100%">
                    <el-table-column
                        prop="szi_ex1"
                        label="项目"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="szi_ex4"
                        label="数量"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="szi_ex2"
                        label="单价">
                    </el-table-column>
                    <el-table-column
                        prop="szi_ex5"
                        label="金额">
                    </el-table-column>
                    <el-table-column
                        prop="szi_ex7"
                        label="备注">
                    </el-table-column>
                </el-table>
            </div>
             
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibletc = false"  type="primary" >关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="金额确定" 
            append-to-body
            width="300px"
            height="70VH"
            style="left:40%;top:10%"
           
            :visible.sync="dialogVisible">
             输入金额：
             <el-input v-model="price" placeholder="请输入金额"  ref="keyboard" @focus="onFocus($event)"></el-input>
            <div style='margin-top:10px'> 
                <keyboard :option="option" @keyVal="getInputValue" ></keyboard>
            </div>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="okPrice">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="查看视频" 
            append-to-body
            width="800px"
            height="70VH"
            style="left:0;top:0"
           
            :visible.sync="dialogVisible2">
               <video-player
                v-if="dialogVisible2"
                class="video-player vjs-custom-skin"
    
                ref="videoPlayer"
    
                :playsinline="true"
    
                :options="playerOptions"
    
                ></video-player>
             <div slot="footer" class="dialog-footer" style='text-align:center'>
                <el-button @click="dialogVisible2 = false" type="danger">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="查看大图" 
            append-to-body
            width="92%"
            height="80VH"
            style="left:0;top:0"
           
            :visible.sync="dialogVisible3">
              <div class="showImgContent">
                <div class="leftMenus">
                    <div v-for="(item,index) in showImgs" :key="index" style="display:flex;flex-direction: column;">
                        <el-image
                                        
                        :src="item.smallImg"
                        fit="contain" 
                        @click="showBigImg(item)"
                         ></el-image>
                         {{item.szi_ex1}}
                    </div>
                </div>
                <div class="rightContent" v-if="showImgAll.length>0">
                    <div class="rightContent_title">
                        {{showImgAll[showImgIndex].name}}
                    </div>
                    <div style="flex:1;overflow:hidden">
                        <img style="object-fit: cover;max-width:100%;max-height:100%"  :src="showImgAll[showImgIndex].url"/>
                        <!--el-image
                            style="height:100%;"                
                            :src="showImgAll[showImgIndex].url"
                            fit="cover" 
                                ></el-image-->
                    </div>        
                </div>
              </div>
             <div slot="footer" class="dialog-footer" style='text-align:center'>
                <el-button @click="showBigImgPre" type="success" style="margin-right:30px">上一张</el-button>
                <el-button @click="showBigImgNext" type="success" style="margin-right:30px">下一张</el-button>
                <el-button @click="dialogVisible3 = false" type="danger">关 闭</el-button>
            </div>
        </el-dialog>


        <el-dialog title="查看大图" 
            append-to-body
            width="92%"
            height="80VH"
            style="left:0;top:0"
           
            :visible.sync="dialogVisible4">
              <div class="showImgContent" v-if="dialogVisible4">
               
                <div class="rightContent" v-if="showCurImgs.length>0">
                    <div class="rightContent_title">
                        {{showCurImgs[showCurImgIndex].name}}
                    </div>
                    <div style="flex:1;overflow:hidden">
                        <img style="object-fit: cover;max-width:100%;max-height:100%" v-if="showCurImgs[showCurImgIndex].types=='image'"  :src="showCurImgs[showCurImgIndex].url"/>
                        <video-player
                            v-if="showCurImgs[showCurImgIndex].types=='video'"
                            class="video-player vjs-custom-skin"
                
                            ref="videoPlayer"
                
                            :playsinline="true"
                
                            :options="playerOptions"
                
                            ></video-player>
                        <!--el-image
                            style="height:100%;"                
                            :src="showImgAll[showImgIndex].url"
                            fit="cover" 
                                ></el-image-->
                    </div>        
                </div>
              </div>
             <div slot="footer" class="dialog-footer" style='text-align:center'>
                <el-button @click="showCurBigImgPre" type="success" style="margin-right:30px">上一张</el-button>
                <el-button @click="showCurBigImgNext" type="success" style="margin-right:30px">下一张</el-button>
                <el-button @click="dialogVisible4 = false" type="danger">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import funeralShowMixin from '../../utils/mixin/funeralshow'
export default {
	mixins: [funeralShowMixin],
    
}
</script>
<style scoped>
.funeral_item_select2{
    width:100%;
    overflow:hidden;
    height:100%;
    padding:10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    padding-top:0;
}
.funeral_item_select{
    width:100%;
    overflow:hidden;
    height:100%;
    padding:10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    padding-top:0;
}
.bigFont{
    font-size:16px !important;
}
.bigFont>>>.el-tree-node__label{
    font-size:16px !important;
}
.bigFont>>>.el-tree-node__content{
    height:30px;
}
.bigFont .title{
    font-size:16px !important;
}
.mains{
    width:100%;
    height:100%;
    
    box-sizing: border-box;
    flex:1;
    overflow-y:hidden;
    display:flex;
    flex-direction: row;
}
.leftMenu{
    width:180px;
    border-right:1px solid #ddd;
    overflow:auto;
}
.el-tree{
    
}
.item_ul{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    box-sizing: border-box;
    flex:1;
    overflow-y:auto;
}
.item_li{
    width:100%;
    text-decoration: none;
    list-style: none;
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    padding:10px;
    cursor: pointer;
}
.item_icon{
    width:60px;
}
.item_content{
    flex:1;
    box-sizing: border-box;
    padding-left:20px;
    cursor:pointer;
}
.remark_label{
    width:60px;
    color:darkgray;
    display:inline-block;
}
.item_content .title{
    font-size:14px;
    color:#000;
    font-weight:bold;
    min-height:25px;
}

.item_content .title_cursor{
    cursor: pointer;
}
.item_content .title_tc{
    color:green;
}
.item_content .remark{
    font-size:12px;
    color:rgba(99, 96, 96, 0.933);
}
.item_icon img{
    width:60px;

}
.price{
    font-size:14px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    color:red;
}
.dw{
    
    color:rgba(99, 96, 96, 0.933);
}
.item_btn{
    width:120px;
    text-align:center;
    margin-top:20px;
}
.footer{
    height:40px;
}
.amt_total_item{
    height:40px;
    box-sizing: border-box;
    padding:10px;
}
.amt_total{
    border:1px solid #ddd;
    line-height:20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: right;
    background:#ddd;
    -moz-box-shadow: 2px 2px 10px #909090;
   -webkit-box-shadow: 2px 2px 10px #909090;
   box-shadow:2px 2px 10px #909090;

}
</style>
<style scoped>

.funeral_item_select_ytj{
    width:100%;
    height:80vh;
    overflow: hidden;
     padding:10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    padding-top:0;
    padding-bottom:0;
}
.treeYtj>>> .el-tree-node__content{
    height:55px;
}
.treeYtj>>>.el-tree-node__label{
    font-size:24px;
    line-height:55px;
}
</style>
<style scoped>
    .activeItem{
        color:#187adf !important;
    }
    #box ul{
		display: flex;
		flex-wrap: wrap;
        /*justify-content: center;*/
	}
	#box li{
		padding: 3px;
		list-style: none;
		margin-right: 15px;
		border: 1px solid #eee;
        width:220px;
        border-radius: 15px;
        margin-top:5px;
	}
	#box img{
		width: 200px;
		height: 150px;
	}
    .item_ul>>>.el-carousel__container{
       /* height: 140px;*/
       height:100%;
    }
    .box_price{
        display:flex;
        flex-direction: row;
    }
    .box_price_txt{
        flex:1;
        line-height:30px;
        font-weight: bold;
    }
    .dialogTc >>> .el-dialog{
        overflow: hidden;
        height:97%;
    }
    .actives{
        
        background:#409EFF !important;
        color:#fff !important;
    }
    .showImgContent{
        height:75VH;
        display:flex;
        flex-direction: row;
    }
    .leftMenus{
        width:200px;
        border-right:1px solid #ddd;
        overflow: auto;
        text-align:center;
    }
    .rightContent{
        flex:1;
       
        text-align:center;
        overflow:hidden;
        display:flex;
        flex-direction: column;
    }
    .rightContent_title{
        text-align:center;
        font-size:30px;
        font-weight:bold;
    }

    ::v-deep .el-icon-folder {
    background: url("~@/assets/img/icon/folder3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-folder:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
    ::v-deep .el-icon-file {
    background: url("~@/assets/img/icon/file3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-file:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
    ::v-deep .el-icon-tree {
    background: url("~@/assets/img/icon/folder3.png") center no-repeat;
    font-size: 16px;
    background-size: cover;
    }
    ::v-deep .el-icon-tree:before {
    content: "替";
    font-size: 16px;
    visibility: hidden;
    }
</style>
<style >
.viewer-container{
    z-index:100000000  !important
}
</style>